import React from 'react'
import ReactDOM from 'react-dom'
import DatePicker from 'react-datepicker'

class WorkBillTools extends React.Component {
  constructor(props){
    super(props)

    this.state = {}
  }

  componentDidMount() {
    this.$startTime = $(ReactDOM.findDOMNode(this.refs.StartTime))
    this.$endTime = $(ReactDOM.findDOMNode(this.refs.EndTime))
    this.$payStartTime = $(ReactDOM.findDOMNode(this.refs.PayStartTime))
    this.$payEndTime = $(ReactDOM.findDOMNode(this.refs.PayEndTime))
    this.$isPay = $(ReactDOM.findDOMNode(this.refs.isPay))
  }

  onSearchClick(event) {
    var username = $(event.target).val();

    this.props.onDataSearch(username);
  }

  onStartTimeSelect(date) {
    this.setState({
      start_date: date
    })
    if (date) {
      this.props.onStartTimeSelect(date.format("YYYY-MM-DD"))
    }else {
      this.props.onStartTimeSelect("")
    }
  }

  onEndTimeSelect(date) {
    this.setState({
      end_date: date
    })
    if (date) {
      this.props.onEndTimeSelect(date.format("YYYY-MM-DD"))
    }else {
      this.props.onEndTimeSelect("")
    }
  }

  onPayStartTimeSelect(event, startTime, startStr) {
    this.$payStartTime.html(startStr)
    if (startStr == '选择支付开始时间') {
      startTime = null
    }
    this.props.onPayStartTimeSelect(startTime)
  }

  onPayEndTimeSelect(event, endTime, endStr) {
    this.$payEndTime.html(endStr)
    if (endStr == '选择支付结束时间') {
      endTime = null
    }
    this.props.onPayEndTimeSelect(endTime)
  }

  onPaySelect(event, is_pay, string) {
    this.$isPay.html(string)
    if (string == '所有') {
      is_pay = null
    }
    this.props.onPaySelect(is_pay)
  }

  handlePayStartDateChange(date) {
    this.setState({
      p_start_date: date
    })
    if (date) {
      this.props.onPayStartTimeSelect(date.format("YYYY-MM-DD"))
    }else {
      this.props.onPayStartTimeSelect("")
    }
  }

  handlePayEndDateChange(date) {
    this.setState({
      p_end_date: date
    })
    if (date) {
      this.props.onPayEndTimeSelect(date.format("YYYY-MM-DD"))
    }else {
      this.props.onPayEndTimeSelect("")
    }
  }

  pad(n, length) {
    var n = n + ""
    return n.length >= length? n:(this.pad("0"+n, length))
  }


  render(){
    var self = this;
    return (
      <div className="bill-role-tools row">
        <div className="row search">
          <label className="billTitle col-sm-2 col-lg-2">维修日期</label>
          <div className = "col-sm-2 col-lg-2 date-picker">
            <DatePicker
              dateFormat="YYYY-MM-DD"
              locale='zh-cn'
              selected = {this.state.start_date}
              isClearable={true}
              placeholderText = "选择开始日期"
              onChange={this.onStartTimeSelect.bind(this)} />
          </div>
          <div className = "col-sm-2 col-lg-2 date-picker">
            <DatePicker
              dateFormat="YYYY-MM-DD"
              locale='zh-cn'
              selected = {this.state.end_date}
              isClearable={true}
              placeholderText = "选择结束日期"
              onChange={this.onEndTimeSelect.bind(this)} />
          </div>
          <div className="col-md-2 col-lg-2 create-button ">
            <form action="/api/work/export" method="POST" name="export" id="export" target="_blank">
              <input name="start_time" value={this.props.start_time} hidden />
              <input name="end_time" value={this.props.end_time} hidden />
              <input name="is_pay" value={this.props.is_pay} hidden />
              <input name="unit_desc" value={this.props.unit_desc} hidden />
              <input name="p_start_date" value={this.props.p_start_date} hidden />
              <input name="p_end_date" value={this.props.p_end_date} hidden />
              <input name="source" value="wxq" hidden />
              <button type="submit" form="export" className="btn-push">
              导出
              </button>
            </form>
          </div>
          <div className="col-sm-3 col-xs-3 search-class">
            <div className="input-group search-group">
              <i className="ti-search"></i>
              <input ref='bill_number' type="text" className="form-control" placeholder="请搜索户号"
                    onChange={(event)=>this.onSearchClick(event)}/>
            </div>
          </div>
        </div>
        <div className="row date">
          <label className="billTitle col-sm-2 col-lg-2">支付日期</label>
          <div className = "col-sm-2 col-lg-2 date-picker">
            <DatePicker
              dateFormat="YYYY-MM-DD"
              locale='zh-cn'
              selected = {this.state.p_start_date}
              isClearable={true}
              placeholderText = "选择支付开始日期"
              onChange={this.handlePayStartDateChange.bind(this)} />
          </div>
          <div className = "col-sm-2 col-lg-2 date-picker">
            <DatePicker
              dateFormat="YYYY-MM-DD"
              locale='zh-cn'
              selected = {this.state.p_end_date}
              isClearable={true}
              placeholderText = "选择支付结束日期"
              onChange={this.handlePayEndDateChange.bind(this)} />
          </div>
          <label className="billIsPay col-sm-2 col-lg-2">付款状态</label>
          <div className="dropdown col-sm-2 col-lg-2">
            <button className="btn btn-default dropdown-toggle" type="button" id="endTimeDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <span ref="isPay">支付状态</span>
              <span className="caret"></span>
            </button>
            <ul className="dropdown-menu" aria-labelledby="endTimeDrop">
              <li><a onClick={(event)=>this.onPaySelect(event, null, '所有')}>所有</a></li>
              <li><a onClick={(event)=>this.onPaySelect(event, true, '已支付')}>已支付</a></li>
              <li><a onClick={(event)=>this.onPaySelect(event, false, '未支付')}>未支付</a></li>
            </ul>
          </div>
        </div>
      </div>
    )
  }
}

export default WorkBillTools
